import { useMemo } from 'react'

interface IProps {
  name: string
  size?: number
  color?: string
  prefix?: string
  scale?: boolean
  onClick?: () => void
}

export default function SvgIcon(props: IProps) {
  const { onClick } = props
  const size = props.size ?? 36
  const color = props.color ?? '#8B96D9'
  const prefix = props.prefix ?? 'icon'
  const scale = props.scale ?? true
  const iconName = useMemo<string>(() => {
    return `#${prefix}-${props.name}`
  }, [prefix, props.name])

  return (
    <svg
      onClick={()=>onClick && onClick()}
      className={scale ? 'active:scale-90 rounded' : ''}
      style={{ height: `${size}px`, width: `${size}px`, color: color }}
    >
      <use href={iconName} fill={color} />
    </svg>
  )
}
